/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <m-list-construction title="资源列表">
    <template slot="conditions">
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick"></el-tabs> -->
      <el-radio-group
        v-model="activeName"
        class="mt20"
        size="small"
      >
        <el-radio-button
          label="vm"
          name="虚机资源"
        >虚机资源</el-radio-button>
        <el-radio-button
          label="host"
          name="物理资源"
        >物理资源</el-radio-button>
      </el-radio-group>

      <m-conditions
        isShow
        @on-conditions="_onConditions"
      >
        <template slot="search-group">
          <el-form
            v-model="searchParams"
            inline
            size="mini"
          >
            <!-- <el-form-item class="mb0">
                            <el-select v-model="searchParams.groupId" placeholder="请选择分组" clearable>
                                <el-option v-for="item in workerGroupList" :key="item.id" :value="item.id"
                                           :label="item.name">{{ item.name }}</el-option>
                            </el-select>
                        </el-form-item> -->
            <!-- <el-form-item class="mb0">
              <el-input placeholder="" v-model="searchVal"></el-input>
            </el-form-item>
            <el-form-item class="mb0">
              <el-button type="primary" icon="el-icon-search" @click="searchParams.searchVal = searchVal">搜索</el-button>
            </el-form-item> -->
          </el-form>
        </template>
      </m-conditions>
    </template>
    <template slot="content">
      <div class="list-model">
        <div class="table-box">
          <!-- <el-table key="host" v-if="activeName === 'host'" :data="hostList" size="mini" style="width: 100%">
            <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
            <el-table-column prop="type" label="算力类型"></el-table-column>
            <el-table-column prop="provider" label="数据中心"></el-table-column>
            <el-table-column prop="resourceType" label="设备型号"></el-table-column>
            <el-table-column prop="count" label="设备数量"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
          </el-table> -->
          <el-table
            key="host"
            v-if="activeName === 'host'"
            :data="hostList"
            size="mini"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              :label="$t('#')"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="名称/id"
            ></el-table-column>
            <el-table-column
              prop="architecture"
              label="系统架构"
            ></el-table-column>
            <el-table-column
              prop="ip"
              label="IP地址"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="部署时间"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime | formatDate}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="cpus"
              label="核数"
            ></el-table-column>
            <!-- <el-table-column prop="usedCpu" label="已使用核数"></el-table-column> -->
            <el-table-column
              prop="usedMemory"
              label="内存使用率"
            >
              <template slot-scope="scope">
                <div>
                  {{ (scope.row.usedMemory*100).toFixed(0)}}%
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="systemUsed,dataUsed,systemTotal,dataTotal"
              label="存储使用率"
            >
              <template slot-scope="scope">
                <div>
                  {{ isNaN(((scope.row.dataUsed/scope.row.dataTotal)*100).toFixed(0)) ? 0:((scope.row.dataUsed/scope.row.dataTotal)*100).toFixed(0)}}%
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.serverStatus===0"
                  style="color:green"
                >正常</span>
                <span
                  v-if="scope.row.serverStatus===1"
                  style="color:red"
                >异常</span>
                <!-- <div :style="{ color: scope.row.serverStatus==='0' ? 'green' : 'red' }">
                  {{ scope.row.serverStatus }}
                </div> -->
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-table key="vm" v-if="activeName === 'vm'" :data="vmList" size="mini" style="width: 100%">
            <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
            <el-table-column prop="type" label="算力类型"></el-table-column>
            <el-table-column prop="provider" label="数据中心"></el-table-column>
            <el-table-column prop="resourceType" label="资源型号"></el-table-column>
            <el-table-column prop="cpu" label="总核数"></el-table-column>
            <el-table-column prop="count" label="调用次数"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
          </el-table> -->
          <el-table
            key="vm"
            v-if="activeName === 'vm'"
            :data="vmList"
            size="mini"
            style="width: 100%;"
          >
            <!-- <el-table-column type="index" :label="$t('#')" width="80"></el-table-column> -->
            <el-table-column
              prop="name"
              label="名称/id"
            ></el-table-column>
            <el-table-column
              prop="cpus,memory,systemTotal,dataTotal"
              label="配置"
            >
              <template slot-scope="scope">
                <!-- <div v-html="scope.row.architecture"></div> -->
                <div>vCPU：{{ scope.row.cpus }} 核</div>
                <div>内存：{{ scope.row.memory|toGB(1) }} GB</div>
                <div>存储：{{ (scope.row.systemTotal+scope.row.dataTotal) | toGB(1)}} GB</div>
              </template>
              <!-- <template slot-scope="scope">
                <div v-for="{item,index} in scope.row.dispose" :key="index" >
                  {{ item.s }}
                </div>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="cpuUsage"
              label="CPU使用率"
            >
              <template slot-scope="scope">
                <div>
                  {{ (scope.row.cpuUsage*100).toFixed(0)}}%
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="usedMemory" label="已使用内存"></el-table-column> -->
            <el-table-column
              prop="usedMemory"
              label="内存使用率"
            >
              <template slot-scope="scope">
                <div>
                  {{ (scope.row.usedMemory*100).toFixed(0)}}%
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="systemUsed,dataUsed,systemTotal,dataTotal"
              label="存储使用率"
            >
              <template slot-scope="scope">
                <div>
                  {{ isNaN(((scope.row.dataUsed/scope.row.dataTotal)*100).toFixed(0)) ? 0:((scope.row.dataUsed/scope.row.dataTotal)*100).toFixed(0)}}%
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="architecture"
              label="系统架构"
            ></el-table-column>
            <el-table-column
              prop="ip"
              label="IP地址"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="部署时间"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime | formatDate}}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="cpu" label="核数"></el-table-column> -->
            <!-- <el-table-column prop="usedCpu" label="已使用核数"></el-table-column> -->
            <el-table-column
              prop="serverStatus"
              label="状态"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.serverStatus===0"
                  style="color:green"
                >正常</span>
                <span
                  v-if="scope.row.serverStatus===1"
                  style="color:red"
                >异常</span>
                <!-- <div :style="{ color: scope.row.serverStatus==='0' ? 'green' : 'red' }">
                  {{ scope.row.serverStatus }}
                </div> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
            background
            @current-change="_page"
            @size-change="_pageSize"
            :page-size="searchParams.pageSize"
            :current-page.sync="searchParams.pageNo"
            :page-sizes="[10, 20]"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </template>
  </m-list-construction>
</template>
<script>
  import _ from 'lodash'
  // import store from '@/conf/home/store'
  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
  import mConditions from '@/module/components/conditions/conditions'
  // import mSpin from '@/module/components/spin/spin'
  // import mNoData from '@/module/components/noData/noData'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import { mapActions } from 'vuex'
  export default {
    name: 'route-index',
    data () {
      return {
        total: 4,
        activeName: 'vm',
        isLoading: false,
        searchVal: '',
        dataList: [],
        allList: [],
        selectVmList: [],
        selectHostList: [],
        isVirtual: '',
        hostListAll: [
          {
            groupName: '长沙超算中心',
            type: 'os-01',
            IP: '172.19.239.52',
            createTime: '2023-02-18 17:22:09',
            cpu: '4',
            usedCpu: '0',
            usedMemory: '0MB',
            status: '空闲'
          },
          {
            groupName: '长沙云谷数据中心',
            type: 'os-02',
            IP: '172.19.239.52',
            createTime: '2023-02-18 17:22:09',
            cpu: '4',
            usedCpu: '0',
            usedMemory: '0MB',
            status: '空闲'
          }
        ],
        vmListAll: [
          {
            type: 'os-02',
            groupName: '长沙云谷数据中心',
            IP: '172.19.239.52',
            createTime: '2023-02-18 17:22:09',
            // cpu: '4',
            // usedCpu: '0',
            usedMemory: '0MB',
            // dispose: 'vCPU:1核心' + '<br/>' + '内存：1GiB',
            // dispose: [
            //   { s: 'vCPU:1核心' },
            //   { s: '内存：1GiB' }
            // ],
            storage: '系统盘：20GiB'
            // status: '空闲'
            // serverStatus: '0'
          }
        ],
        workerGroupList: [],
        searchParams: {
          pageSize: 10,
          pageNo: 1,
          searchVal: '',
          groupId: parseInt(this.$route.query.groupId) || ''
          // isVirtual: ''
        },
        isLeft: true,
        item: {},
        createDialog: false,
        layout: 'list'
      }
    },
    mixins: [listUrlParamHandle],
    props: {},
    watch: {
      activeName () {
        this.dataList = []
        this._getList()
      },
      $route: function () {
        let { groupId } = this.$route.query
        this.searchParams.groupId = groupId && parseInt(groupId) || ''
        // console.log(this.searchParams)
        // let { isVirtual } = this.$route.query
        // this.searchParams.isVirtual = isVirtual && parseInt(isVirtual) || ''
      }
    },
    async created () {
      await this._getWorkerGroups()
      let { groupId } = this.$route.query
      if (groupId) this.searchParams.groupId = parseInt(groupId)
      // let { isVirtual } = this.$route.query
      // if (isVirtual) this.searchParams.isVirtual = parseInt(isVirtual)
      // let { provider } = this.$route.query
      // if (provider) {
      //   this.searchForm.provider = provider
      // }
    },
    computed: {
      vmList (e) {
        // console.log(e.dataList[index])
        // this._getList()
        // console.log(this.dataList)
        // let beforeSelectList = []
        // let selectList = []
        // beforeSelectList = this.dataList
        // for (let i = 0; i < (beforeSelectList).length; i++) {
        //   if (beforeSelectList[i].isVirtual === 1) {
        //     selectList.push(beforeSelectList[i])
        //   }
        // }
        return this.dataList
        // return this.dataList
      },
      hostList () {
        // return this.dataList
        return this.dataList
        // let { type } = this.searchForm
        // return this.hostListAll.filter(e => e.type.includes(type))
      }
    },
    methods: {
      ...mapActions('scheduler', ['getResourceList']),
      ...mapActions('security', ['getWorkerGroups']),
      /**
       * Query
       */
      _onConditions (o) {
        this.searchParams = _.assign(this.searchParams, o)
      },
      _page (val) {
        this.searchParams.pageNo = val
      },
      _pageSize (val) {
        this.searchParams.pageSize = val
      },
      _onEdit (item) {
        this.item = item
        this.createDialog = true
      },
      _create () {
        this.item = {}
        this.createDialog = true
      },
      onUpdate () {
        this._debounceGET('false')
        this.createDialog = false
      },
      close () {
        this.createDialog = false
      },

      // handleClick (tab, event) {
      //   console.log('aaa' + tab, event)
      //   if (tab.name === 'vm') {
      //     this.second()
      //   } else {
      //     this.first()
      //   }
      // },
      // first () {
      //   console.log('aaa')
      // },
      // second () {
      //   // this._getList()
      //   // // console.log(this.dataList)
      //   // let beforeSelectList = []
      //   // let selectList = []
      //   // beforeSelectList = this.dataList
      //   // for (let i = 0; i < (beforeSelectList).length; i++) {
      //   //   if (beforeSelectList[i].isVirtual === 1) {
      //   //     selectList.push(beforeSelectList[i])
      //   //   }
      //   // }
      //   // console.log(selectList)
      // },

      async _getWorkerGroups () {
        return this.getWorkerGroups({ pageSize: 10000, pageNo: 1 }).then(res => {
          // console.log(res.totalList)
          this.workerGroupList = res.totalList
          // console.log('aaa', this.workerGroupList)
          // this.data.isVirtual = res.totalList
          // console.log(res.totalList)
          // if (this.searchParams.groupId === '') {
          //   this.searchParams.groupId = this.workerGroupList && this.workerGroupList[0].id
          //   // this.searchParams.groupId = _.get(this.workerGroupList, '0.id', '')
          // }
          // this.searchParams.groupId = this.workerGroupList[0].id
        }).catch(e => {
        })
      },
      _getList (flag) {
        this.isLoading = !flag
        this.getResourceList({ ...this.searchParams, isVirtual: this.activeName === 'vm' ? 1 : 0 }).then(res => {
          if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
            this.searchParams.pageNo = this.searchParams.pageNo - 1
          } else {
            this.dataList = []
            this.dataList = res.totalList
            this.total = res.total
            this.isLoading = false
          }
        }).catch(e => {
          this.isLoading = false
        })
      }
    },

    beforeDestroy () {
      sessionStorage.setItem('isLeft', 1)
    },

    components: { mListConstruction, mConditions }
  }
</script>
<style lang="scss" scoped>
.list-model {
  max-height: calc(100vh - 260px);
}
.green {
  color: #34a900 !important;
}
// .el-table {
//   .cell{
//     white-space: pre-line;
//     white-space: pre-wrap;
//   }
// }
</style>
